Skip to main content

Code Block

Go back to the list of Blocks

Code block lets you add and display code snippets for others to view.

Code block example:

if ( condition ) {
    action1();
    action2();
} elseif ( condition2 && condition3 ) {
    action3();
    action4();
} else {
    defaultaction();
}

To add the Code block, open the block inserter by clicking the (+) icon on the upper left corner of the editor. After that, look for Code using the search bar and click it to insert the block into the editor.

A demonstration to add and use code block

Alternatively, you can type /code on the editor to insert the Code block manually.

Code block keyboard shortcut

Detailed instructions on adding blocks

Block toolbar​

Most blocks have their own block-specific controls that allow you to manipulate the block right in the editor.

The Code Block shows the following buttons:

  • Transform to
  • Moving handles
  • Bold
  • Italic
  • Link
  • More Rich Text controls
  • More options

Code block toolbar

Transform to​

The Transform to button lets you change the Code block into a Paragraph, Columns, Group, Custom HTML or Preformatted blocks.

Code block toolbar with the transform option highlighted

Transforming the Code block into Group will give you the ability to change the background color around the code.

Code block in a group with a colored background

Moving handles​

The dotted icons can be used to drag and drop a block to the place of your choosing. The up and down arrow icons can be used to shift a block up and down in your document.

Code block toolbar with moving handles highlighted

Get more information about moving a block within the editor.

Change alignment​

Code block toolbar with the alignment option highlighted

The change alignment tool lets you align the Code block within the content. You can choose one of the following alignment options:

None: Leaves the block alignment as is.

Wide width: Increase the block’s width beyond the content size.

Bold​

Code block toolbar with bold option highlighted

You can select the text in the Code block and use the Bold option or Ctrl+B / Cmd+B on your keyboard to bold it, which is usually heavier than the surrounding text.

Italic​

Code block toolbar with italic option highlighted

You can select the text in the Code block and use the Italic option or Ctrl+I / Cmd+I on your keyboard to italicize it, which usually appears slanted to the right.

Code block toolbar with link option highlighted

Use the link icon to hyperlink the highlighted text inside the Code block.

Read about more link editing options.

More rich text options​

The drop-down menu to the left of the More options menu contains a range of additional rich text editing options such as highlighting, inline code, strikethrough, and more.

Read about more rich text editing options.

More options​

The Options menu represented by three vertical dots on the far right of the toolbar gives you more features such as the ability to duplicate or remove the block.

Read about these and other settings.

Block settings​

The block settings panel contains customization options specific to the block. To open it, select the block and click the Settings button next to the Publish button.

Block settings panel

Color​

The Code block provides color settings options to change the text and background colors.

For details, refer to this support article: Color settings overview

Typography​

The Code block provides typography settings to change the font family, appearance, line height, letter spacing, decoration, letter case, and font size.

For details, refer to this support article: Typography settings overview

Dimensions​

The Code block provides dimension settings options to add padding and margin.

For details, refer to this support article: Dimension settings overview

Border​

The Code block provides border settings options to add border color, width, and radius.

For details, refer to this support article: Border settings overview

Advanced​

The Advanced tab lets you add HTML anchor and CSS class(es) to your block.

Advanced option

HTML anchor allows you to make a unique web address for a particular Code Block. Then, you’ll be able to link directly to a Code Block of your page.

The Additional CSS class(es) lets you add CSS class(es) to your block, allowing you to write custom CSS and style the block as you see fit.

Changelog​

  • Updated 2024-03-26
    • Add wide align support
    • Update videos and screenshots for 6.3
  • Updated 2023-08-09
    • Replaced the link section with short summary linking to new dedicated page.
  • Updated 2023-06-08
    • Replaced “More rich text options” section with short summary linking to new dedicated page for rich text editing options.
  • Updated 2023-06-02
    • Screenshots for 6.2
    • Revised formatting
    • Added transform to paragraph support
  • Updated 2021-02-27
    • Added Typography option
  • Updated 2020-09-13
    • Screenshots and video as per WordPress 5.5
    • Added feature changes in Block Toolbar
    • Added feature changes in Block Settings
  • Created 2019-03-07